<template>
  <cu-layout title="商品详情">
    <view class="">
      <uv-swiper
        :list="info.imgs"
        indicator
        indicator-mode="line"
        circular
        height="750rpx"
      />
    </view>
    <view class="cu-card rounded-0">
      <view class="bg-white leading-24 mt-15">
        <view class="flex h-24  text-red text-bold">
          <view class="text-20 mr-2">￥</view>
          <view class="text-24">{{ info.price }}</view>
        </view>
        <view class="text-16 my-10 font-600">{{ info.name }}</view>
        <view class="flex-ba leading-20 text-content">
          <view class=""><text class="text-tips">库存：</text>{{ info.stock }}</view>
          <view class=""><text class="text-tips">销量：</text>{{ info.buy }}</view>
        </view>
      </view>
    </view>

    <view class="cu-footer ">
      <view class="cu-footer-fixed flex-a px-20 hair-t shadow-t">
        <view class="flex-1 flex-a text-bold">
          <view class="text-16">合计：</view>
          <view class="text-red text-20">{{ info.price }}</view>
        </view>
        <view class="ml-40">
          <uv-button :disabled="!info.stock" shape="circle" :color="`linear-gradient(to right, ${$.color.primary}, ${$.color.primaryDark})`" @click="buy">
            <view class="px-30">立即购买</view>
          </uv-button>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import {
  ref
} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'

const info = ref({})

onLoad(async(options) => {
  reload(options.id)
})

function reload(id) {
  $.get('/index/goodsDetail', { id }).then(res => {
	  if (!res.success) {
	    $.utils.showModal({
	      title: '提示',
	      content: res.msg,
	      showCancel: false
	    }).then(() => $.router.back())
	    return false
	  }
	  info.value = res.data
  })
}

function buy() {
  $.router.go('/pages/order/confirm', { id: info.value.id })
}
</script>

<style lang="scss">
	.sku-logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8prx;
		overflow: hidden;

		&::after {
			border-radius: 16rpx;
		}
	}

	.sku-img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.sku-item {
		padding: 12rpx 24rpx;
		background-color: #ededed;
		border-radius: 8rpx;
		margin-right: 24rpx;
		margin-bottom: 24rpx;

		&.active {
			color: $uv-primary;
			background-color: #ecf5ff;
		}
	}
</style>
